﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta charset="UTF-8">
    <title>client - python-socket版 聊天模型</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    
</head>
<body>

<p> 
    (点击模拟登录如下用户) --- --- --- --- --- --- <a href="?">[重置游客]</a> 
    <br>
    鸽子： <a href="?uid=123&uto=456&uname=和平鸽(Peace)">和平鸽(peace)>神秘客服</a>(123>456)<br>
    客服： <a href="?uid=456&uto=123&uname=神秘客服">神秘客服>和平鸽(peace)</a>(456>123)<br>
    <br>
</p>

<input type="button" value="连接服务端..." id="connect"/> 

<ul id="lists"></ul>
<form class="form">
<input type="text" placeholder="请输入发送的消息" id="message"/>
<input type="button" value="发送..." id="send"/>
</form>


<p> 
    <input type="text" value="room-789" placeholder="聊天室id" id="room"/>
    <input type="button" value="进入聊天室" id="join"/>
    <input type="button" value="退出聊天室" id="exit"/>
</p>


<script>

var oConnect = document.getElementById('connect');
var oSend = document.getElementById('send');
var oJoin = document.getElementById('join');
var oExit = document.getElementById('exit');
var ws = null;

var msgShow = function(act, msg){
    var old = $('#lists').html();
    $('#lists').append("<li>("+act+"): "+msg+"</li>");
}
oJoin.onclick = function(){
    if(!ws){
        alert('请连接服务端...!')
        return
    } 
    uroom = $("#room").val()
    var data = {key:"joinRoom", val:{uid:uid,uroom:uroom}}
    ws.send(JSON.stringify(data))
    $('#send').val('发送到['+uroom+']聊天室')
};
oExit.onclick = function(){
    var data = {key:"exitRoom", val:{uid:uid}}
    ws.send(JSON.stringify(data))
    $('#send').val('发送给['+uto+']用户')
    uroom = ''
};
oConnect.onclick = function(){
    if(!uid){
        alert('请模拟登录!')
        return
    } 
    ws = new WebSocket('ws://127.0.0.1:10083'); // 10083
    ws.onopen = function(){
        var data = {key:"initUser", val:{uid:uid,uname:uname}}
        ws.send(JSON.stringify(data))
        $('#send').val('发送给['+uto+']用户')
        msgShow('Info', '客户端已连接');
    }
    ws.onmessage = function(evt){
        var pre = 'Get', data = evt.data, 
            fquan = data.indexOf('"key":"sendRoom"')>0,
            froom = data.indexOf('"uroom":"'+uroom+'"')>0,
            fone = data.indexOf('"key":"sendOne"')>0,
            fget = data.indexOf('"uto":"'+uid+'"')>0,
            fsend = data.indexOf('"ufrom":"'+uid+'"')>0;
        if(fquan && fsend){
            pre = '[群发]'
        }else if(fquan && froom){
            pre = '[群收]'
        }else if(fone && fsend){
            pre = '[发]'
        }else if(fone && fget){
            pre = '[收]'
        }
        msgShow(pre, data);
    }
    ws.onclose = function(){
        msgShow('Info', '客户端已断开连接');
    };
    ws.onerror = function(evt){
        msgShow('Error', evt.data);
    };
};
oSend.onclick = function(){
    if(!ws){
        alert('请连接服务端...!')
        return
    } 
    var msg = $("#message").val(),
        cjson = {text:msg};
    if(!msg || !uid) return
    if(uid==uto){
        alert('Error!')
        return
    }
    var row = {ufrom:uid, type:'text', cjson:cjson}, key='sendOne'
    if(uroom){  // 如果加入了聊天室，则发到聊天室
        row['uroom'] = uroom
        key = 'sendRoom'
    }else{
        row['uto'] = uto
    }
    var data = JSON.stringify({key:key, val:row})
    ws.send(data)
    $("#message").val('')
    //msgShow('Send', data)
}

var uid = urlPara('uid'),
    uto = urlPara('uto'),
    uroom = '',
    uname = decodeURI(urlPara('uname')); 

// 获取HTML页面参数
function urlPara(key,def,url){
    url = url ? url : location.href;
    var re = (new RegExp("([^(&|\?)]*)" + key + "=([^&|#]*)").test(url+"#")) ? RegExp.$2 : '';
    if(def && !re) re = def;
    return re;
}

</script>


<p>
python版websocket<br>
https://www.jianshu.com/p/e3fe5805e51c
</p>


</body>
</html>